<template>
    <div class="pagebody">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 包裹预报 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="search-box">
                <el-form :inline="true">
                    <el-form-item label="快递单号">
                        <el-input
                            v-model="searchSet.expressNumber"
                            prefix-icon="el-icon-search"
                            clearable
                            placeholder="请输入快递单号"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="用户代码">
                        <el-input
                            v-model="searchSet.userCode"
                            prefix-icon="el-icon-search"
                            clearable
                            placeholder="请输入用户代码"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="预报状态">
                        <el-select v-model="searchSet.status" placeholder="选择状态" clearable>
                            <el-option
                                :label="item.name"
                                v-for="(item, index) in statusOption"
                                :key="index"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="开始时间">
                        <el-date-picker
                            v-model="searchSet.startTime"
                            clearable
                            type="datetime"
                            placeholder="选择日期时间"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            align="right"
                            :picker-options="pickerTimeOptions"
                            style="width: 200px"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间">
                        <el-date-picker
                            v-model="searchSet.endTime"
                            clearable
                            type="datetime"
                            placeholder="选择日期时间"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            align="right"
                            :picker-options="pickerTimeOptions"
                            style="width: 200px"
                        ></el-date-picker>
                    </el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                    <el-button type="primary" icon="el-icon-download" @click="handleExport">导出</el-button>
                </el-form>
            </div>
            <el-table
                :data="tableData"
                v-loading="tableLoading"
                border
                class="table"
                ref="mainTable"
                header-cell-class-name="table-header"
                :row-class-name="tableRowClassName"
            >
                <!-- <el-table-column
                    prop="username"
                    :formatter="formatUserName"
                    label="预报用户昵称"
                    show-overflow-tooltip
                    width="120"
                    align="center"
                /> -->
                ><el-table-column
                    prop="usercode"
                    :formatter="formatUserCode"
                    label="预报用户代码"
                    width="130"
                    align="center"
                ></el-table-column>
                <el-table-column prop="repositoryname" label="仓库名称" width="100" align="center"></el-table-column>

                <el-table-column prop="addtime" label="预报时间" width="160" align="center"></el-table-column>
                <el-table-column prop="couriername" label="快递名称" width="100" align="center"></el-table-column>
                <el-table-column prop="expressnumber" label="快递单号" min-width="130" align="center"></el-table-column>
                <el-table-column prop="packagename" label="品名" width="100" align="center"></el-table-column>
                <el-table-column prop="count" label="数量" width="60" align="center"></el-table-column>
                <el-table-column label="是否带电" width="100" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.hasbattery == 1" class="color-red">是</div>
                        <div v-else>否</div>
                    </template>
                </el-table-column>
                <el-table-column label="是否立即转运" width="100" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.cansendasap == 1" class="color-red">是</div>
                        <div v-else>否</div>
                    </template>
                </el-table-column>
                <el-table-column prop="location" label="柜架位置" min-width="100" align="center"></el-table-column>
                <el-table-column label="状态" width="100" align="center">
                    <template slot-scope="scope">
                        <div
                            class="CustomTag"
                            :style="{
                                'background-color': statusOption[scope.row.status] ? statusOption[scope.row.status].color : '#909399'
                            }"
                        >
                            {{ statusOption[scope.row.status] ? statusOption[scope.row.status].name : '无效' }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="80" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-s-order" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="sizes, total, prev, pager, next"
                    :current-page="query.index"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    :page-size="query.pageSize"
                    :total="itemTotal"
                    @current-change="handlePageChange"
                    @size-change="handlePageSizeChange"
                ></el-pagination>
            </div>
        </div>
        <detailDialog :visible.sync="detailVisible" :data="detailInfo" :dataType="detailType"> </detailDialog>
    </div>
</template>

<script>
import API from '../../../api/index'; //读入restfulAPI
import JSTool from '../../../utils/JSTool';
import dataTable from './dataTable';
import detailDialog from '../../common/dialog/detailDialog.vue';
export default {
    name: 'packageInTable',
    mixins: [dataTable],
    components: {
        detailDialog
    },
    data() {
        return {
            searchSet: {
                expressNumber: '',
                startTime: '',
                endTime: '',
                userCode: '',
                status: ''
            },
            query: {
                index: 1,
                pageSize: 10
            },

            editVisible: false,
            form: {},
            detailVisible: false,
            detailInfo: {},
            detailType: [
                {
                    attrs: { column: 2 },
                    list: [
                        { label: '品名', key: 'packagename' },
                        { label: '快递名称', key: 'couriername' },
                        { label: '快递单号', key: 'expressnumber' },
                        { label: '仓库名称', key: 'repositoryname' },
                        { label: '预报数量', key: 'count' },
                        { label: '预报时间', key: 'addtime' },
                        { label: '预报用户代码', key: 'usercode' },
                        // { label: '预报用户昵称', key: 'username' },
                        { label: '货架位置', key: 'location' },
                        {
                            label: '预报状态',
                            key: 'status',
                            span: 2,
                            format: (row, value) => {
                                return this.statusOption[value] ? this.statusOption[value].name : '无效';
                            }
                        },
                        { key: 'remark', label: '备注', span: 2 }
                    ]
                }
            ],
            statusOption: [
                { name: '无效', value: '0', color: '#909399' },
                { name: '预报', value: '1', color: '#2b821d' },
                { name: '已入库', value: '2', color: '#409EFF' },
                { name: '已揽收', value: '3', color: '#0098d9' },
                { name: '待验货', value: '4', color: '#e6b600' },
                { name: '待退货', value: '5', color: '#e6b600' },
                { name: '待换货', value: '6', color: '#e6b600' },
                { name: '已退货', value: '7', color: '#cda819' },
                { name: '已验货', value: '8', color: '#cda819' },
                { name: '已换货', value: '9', color: '#cda819' },
                { name: '申请打包', value: '10', color: '#ffb248' },
                { name: '发货待确认', value: '11', color: '#339ca8' },
                { name: '待发货', value: '12', color: '#eb8146' },
                { name: '已发货', value: '13', color: '#67C23A' },
                { name: '已签收', value: '14', color: '#626c91' }
            ]
        };
    },
    created() {
        this.init();
    },
    mounted() {},
    methods: {
        //页面初始化
        init() {
            this.getData();
        },

        getData() {
            this.tableLoading = true;
            API.StandardDoWith(API.PackageClaim.Get(this.getQuery()), this, {
                success: (detail) => {
                    this.itemTotal = detail.count;
                    this.tableData = detail.list;
                },
                complete: () => {
                    this.tableLoading = false;
                }
            });
        },

        handleDetail(index, row) {
            this.detailVisible = true;
            let obj = JSTool.DeepClone(row);
            this.detailInfo = obj;
        },

        tableRowClassName({ row, rowIndex }) {
            if (row.location) {
                return 'success-row';
            }
            return 'warning-row';
        },
        formatUserCode(row, column, cellValue, index) {
            return cellValue ? cellValue : '————';
        },
        formatUserName(row, column, cellValue, index) {
            return cellValue ? cellValue : '无名称';
        },
        handleExport() {
            this.$confirm('是否导出Excel数据?', '提示')
                .then(() => {
                    API.StandardDownFile(API.ClaimExport(), '包裹预报数据.xlsx');
                })
                .catch((err) => {});
        }
    }
};
</script>

<style scoped>
@import '../../../assets/css/dataTable.css';
.RowLineSpaceBetween {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
</style>
